<template>
  <my-layout>
    <!-- 这里 slot 表示放到父组件中的名为 aside 的插槽中 -->
    <Aside :aSideData="aSideData" slot="aside" />
    <!-- 这里点击aside之后，显示的内容。 -->
    <el-main v-loading="loading" slot="aside-content">
      <el-row>
        <!-- 这里是已经点击过的历史的导航栏 -->
        <el-col class="custom-header">
          <el-card shadow="hover">
            <transition name="el-zoom-in-center">
              <my-header v-show="show" />
            </transition>
          </el-card>
        </el-col>
        <!-- 这里是每个路由显示的地方 -->
        <el-col>
          <el-card shadow="hover">
            <transition appear name="el-zoom-in-top">
              <router-view v-show="show">
                <keep-alive>
                  <router-view v-if="$route.meta.keepAlive"></router-view>
                </keep-alive>
                <router-view v-if="!$route.meta.keepAlive"></router-view>
              </router-view>
            </transition>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </my-layout>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

import Aside from "@/components/Aside.vue";
import MyLayout from "@/components/MyLayout.vue";
import { ASideDataType } from "ASideTypes";
import { menuConfig } from "@/config/menuConfig.ts";
import { LoadingModule } from "@/store/modules/LoadingModule";
import MyHeader from "@/components/MyHeader.vue";

@Component({
  name: "CustomLayout",
  components: { Aside, MyLayout, MyHeader }
})
export default class CustomLayout extends Vue {
  /**
   * todo 这里需要权限设置
   */
  aSideData: Array<ASideDataType> = menuConfig;

  get show() {
    return !LoadingModule.loading;
  }

  get loading() {
    return LoadingModule.loading;
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}
.custom-header {
  margin-bottom: 0.5rem;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
